<template>
  <!--  轮播图-->
  <div class="Rotation ">
    <el-carousel class="lun-bo" :interval="5000"  height="4.25rem" arrow="always">
      <el-carousel-item v-for="(item,index) in listData" :key="index" :style="{background:`url(${item.src})`}" class="bg">
		  <div class="homeHeader">
		  	<h1>{{item.a}}</h1>
		  	<p>{{item.b}}</p>
              <button @click="Jump()" style="padding: 0.02rem 0.2rem 0.02rem;">{{item.c}}</button>
		  	<button @click="Jump()"
		  		style="padding: 0.02rem 0.1rem 0.02rem;background-color:transparent;border: 1px white solid;">{{item.d}}</button>
		  </div>
      </el-carousel-item>
    </el-carousel>

  </div>

</template>

<script>
export default {
  name: "Rotation",
  props:['listData'],
  data() {
    return {
      list: [
      ],
    }
  },
    methods:{
        Jump(){
            window.location.href='http://47.100.78.124:9982'
        }
    }
}
</script>

<style scoped lang="less">
    /deep/.el-carousel__indicator--horizontal{
        display: none;
    }
    /deep/.el-carousel__arrow{
        width: 50px;
        height: 50px;
        font-size: 24px;
        border-radius: 0;
        background: rgba(255, 255, 255,0.2);
        opacity: 0.8;
        /*color: white;*/
    }

    /deep/.el-carousel__arrow:hover{
        background-color: #1DD2AF;
        opacity: 0.8;
        color: white;
    }
.Rotation {
  width: 100%;
  height: 760px;
}

.homeHeader {
		position: absolute;
		top:28%;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		color: white;
		z-index: 99;

		h1 {
			font-size: 62px;
		}

		p {
			font-size:28px;
		}

		button {
			height: 67px;
			color: white;
			font-size: 30px;
			border: none;
			margin-top: 40px;
			border-radius: 10px;
      cursor: pointer;
		}

		button:nth-of-type(1) {
			background: #1DD2AF;
			margin-right: 40px;
		}

	}
	.lun-bo {
		height: 868px;
		position: relative;
	}
    .bg{
       background-size: cover !important;
        background-repeat: no-repeat !important;
    }
</style>
